<template>
	<view class="background" :style="{'--width':width,'--height':height}">
		<view class="top" :style="{'--width':width,'--height':height}">
			<uni-icons type="back" size="30" class="back" @click="back"></uni-icons>
			<text class="text1">解锁</text>
		</view>

		<view class="card" v-for="(item,index) in list" :key="item.id">
			<text class="text3">{{item.name}}</text>
			<text class="text4"><text class="jiage">{{item.price}}</text>元/条</text>
			<view @click="but(item)" class="but">提交订单</view>
		</view>
		<text class="text2">遇到问题请联系客服</text>
		<image :src="src1" class="img"></image>
		<template v-if="src2">
			<text class="text5">享受激活码优惠添加</text>
			<image :src="src2" class="img1"></image>
		</template>
	</view>
</template>

<script>
	import {
		shangpingliebiao1,
		zhifu,
		jihuomama,
		kefu,
		serveUser
	} from "@/api/toolbox.js"
	export default {
		data() {
			return {
				list: [],
				width: 0,
				height: 0,
				text: [
					["", ""],
					["", ""],
					["", ""]
				],
				paylist: {
					"goodsId": 30,
					"goodsType": "8",
					"payWay": "1",
					"payProduct": "1",
					"attach": {
						"schoolCode": "10001",
						"collegeCode": "006",
						"majorCode": "085400"
					}
				},
				src2: "",
				src1: "",
			}
		},
		onLoad(options) {
			let a = uni.getWindowInfo()
			this.width = a.screenWidth
			this.height = a.screenHeight
			serveUser().then((res) => {
				this.src1 = res.data
			})
			jihuomama().then((res) => {
				this.src2 = res.data
			})
			if (options?.items) {
				let info = JSON.parse(options.items);
				this.paylist.attach = info
			}
			shangpingliebiao1().then((res) => {
				this.list = res.data;
			})

			/*#ifdef APP-PLUS*/
			console.log('APP端')
			this.paylist.payProduct = "2"
			/*#endif*/
		},
		methods: {
			but(row) {
				this.paylist.goodsId = row.id;
				switch (row.id) {
					case '29':
						this.paylist.goodsType = '9';
						break;
					default:
						this.paylist.goodsType = '8';
						break;
				}
				zhifu(this.paylist).then((res) => {
					let b = res.data.wechatPayResponse
					uni.requestPayment({
						appid: b.appid,
						provider: 'wxpay',
						timeStamp: b.timeStamp,
						nonceStr: b.noncestr,
						package: b.packageStr,
						signType: 'RSA',
						paySign: b.sign,
						success: function(res) {
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2]; //上一页页面实例
							prevPage.$vm.flag = 1
							prevPage.onShow()
							prevPage.$vm.$children[1].sousuo(1)
							uni.navigateBack();
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				})
			},
			cha() {
				console.log(this.text)
			},
			back() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.background {
		background-color: #f0f0f0;
		width: calc(var(--width)*1px);
		height: calc(var(--height)/1000*940*1px);
	}

	.back {
		margin-left: calc(var(--width)/1000*10*1px);
	}

	.text1 {
		position: absolute;
		margin-left: calc(var(--width)/1000*30*1px);
		margin-top: calc(var(--height)/1000*3*1px);
		font-weight: bold;
	}

	.top {
		width: calc(var(--width)*1px);
		height: calc(var(--height)/1000*50*1px);
		background-color: white;
		margin-top: calc(var(--height)/1000*60*1px);
	}

	.card {
		width: calc(var(--width)/1000*900*1px);
		height: calc(var(--height)/1000*140*1px);
		background-color: white;
		box-shadow: 7px 7px 5px #dadada;
		border-radius: 10px;
		margin-left: calc(var(--width)/1000*50*1px);
		margin-top: calc(var(--height)/1000*30*1px);
	}

	.text2 {
		position: absolute;
		font-size: 30rpx;
		font-weight: bold;
		margin-left: calc(var(--width)/1000*60*1px);
		margin-top: calc(var(--height)/1000*50*1px);
	}

	.img {
		width: calc(var(--width)/1000*400*1px);
		height: calc(var(--width)/1000*400*1px);
		margin-left: calc(var(--width)/1000*30*1px);
		margin-top: calc(var(--height)/1000*80*1px);
	}

	.text5 {
		position: absolute;
		font-size: 30rpx;
		font-weight: bold;
		margin-left: calc(var(--width)/1000*150*1px);
		margin-top: calc(var(--height)/1000*50*1px);
	}

	.img1 {
		width: calc(var(--width)/1000*400*1px);
		height: calc(var(--width)/1000*400*1px);
		margin-left: calc(var(--width)/1000*130*1px);
		margin-top: calc(var(--height)/1000*80*1px);
	}

	.text3 {
		position: absolute;
		margin-left: calc(var(--width)/1000*30*1px);
		margin-top: calc(var(--height)/1000*20*1px);
		font-size: 27rpx;

	}

	.text4 {
		position: absolute;
		margin-left: calc(var(--width)/1000*30*1px);
		margin-top: calc(var(--height)/1000*70*1px);
		font-size: 27rpx;
		font-weight: bold;
	}

	.jiage {
		color: #ffbb0e;
		font-size: 43rpx;
	}

	.but {
		position: absolute;
		font-size: calc(var(--width)/1000*32*1px);
		width: calc(var(--width)/1000*180*1px);
		height: calc(var(--height)/1000*40*1px);
		margin-top: calc(var(--height)/1000*50*1px);
		border-radius: calc(var(--height)/1000*50/2*1px);
		background-color: #FED534;
		color: #555555;
		margin-left: calc(var(--width)/1000*680*1px);
		line-height: calc(var(--height)/1000*40*1px);
		text-align: center;
	}
</style>